import React ,{ useState }from 'react'
import "./index.css"
export default function Item({ todo, done, id, setTodoList, todoList }) {
    const [isActive,setIsActive] = useState(false)
    //鼠标移入li事件函数
    const mouseHandle = (bool)=>{
        return () => {
            setIsActive(bool)
          }

    }  
     //多选框触发改变的事件函数
     const checkChangeHandle =(e)=>{
      const newTodo = todoList.map(item =>{
        if (item.id === id) {
          item.done = e.target.checked;
        }
        return item
      })
      setTodoList(newTodo);
     }
  return (
    <li onMouseEnter={mouseHandle(true)}
        onMouseLeave={mouseHandle(false)}
        className={isActive ? "active" : ""}
    
    
    
    >
    <label>
      <input type="checkbox" checked={done} onChange={checkChangeHandle}/>
      <span>{todo}</span>
    </label>
    <button className="btn btn-danger" style={{ display: isActive ? "block" : "none" }}>删除</button>
  </li>
  )
}
